import {connect} from "react-redux";
import React, {useState, useEffect} from "react";
import {Col, Form, Input, Row, Select} from "antd";
import PicturesWall from "../../../compoments/PictureWall";

const FormItem = Form.Item;
const typeList = [
    {value: '1', name: '沙发'},
    {value: '2', name: '椅子'},
    {value: '3', name: '床'},
    {value: '4', name: '桌子'},
];
const Page = (props) => {
    const [form] = Form.useForm();
    const [fileList, setFileList] = useState([]);
    const [file, setFile] = useState([]);

    useEffect(() => {

    }, []);

    const handleGetPictureWall = (file, fileList) => {
        // 获取上传的图片的相关信息
        setFileList(fileList);
        setFile(file);
    };

    const onFinish = (value) => {

    };

    return (
        <div style={{padding: 14, background: '#fff', minHeight: 360}}>
            <label><p>经销商管理 / 添加经销商</p></label>
            <Row>
                <Col span={12}>
                    <Form form={form} onFinish={onFinish}>
                        <FormItem
                            required
                            label='图片'
                            labelCol={{span: 3}}
                        >
                            <PicturesWall
                                size={5}
                                fileList={fileList}
                                multiple={false}
                                fileUpdate={handleGetPictureWall}
                            />
                            <span style={{color: 'red'}}>最多可上传5个，建议尺寸：500*250px</span>
                        </FormItem>
                        <FormItem
                            name={"type"}
                            label={'分类'}
                            labelCol={{span: 3}}
                            rules={[{required: true, message: '请选择'}]}
                            style={{marginBottom: 15}}>
                            <Select style={{width: 150}} placeholder={'请选择'}>
                                {
                                    typeList.map((item) => {
                                        return (
                                            <Select.Option
                                                key={item.value} value={item.value}>
                                                {item.name}
                                            </Select.Option>
                                        );
                                    })
                                }
                            </Select>
                        </FormItem>
                        <Form.Item name={"f_name"}
                                   label={'工厂名称'}
                                   rules={[{required: true, message: '请输入'}]}
                                   labelCol={{span: 3}}
                                   style={{marginBottom: 15}}>
                            <Input style={{width: 150}} placeholder={'请输入'}/>
                        </Form.Item>
                        <Form.Item name={"u_name"}
                                   label={'联系人'}
                                   rules={[{required: true, message: '请输入'}]}
                                   labelCol={{span: 3}}
                                   style={{marginBottom: 15}}>
                            <Input style={{width: 150}} placeholder={'请输入'}/>
                        </Form.Item>
                        <Form.Item name={"phone"}
                                   label={'联系方式'}
                                   rules={[{required: true, message: '请输入'}]}
                                   labelCol={{span: 3}}
                                   style={{marginBottom: 15}}>
                            <Input style={{width: 150}} placeholder={'请输入'}/>
                        </Form.Item>
                        <Form.Item name={"wx_code"}
                                   label={'小程序账号'}
                                   rules={[{required: true, message: '请输入'}]}
                                   labelCol={{span: 3}}
                                   style={{marginBottom: 15}}>
                            <Input style={{width: 150}} placeholder={'请输入'}/>
                        </Form.Item>
                        <Form.Item name={"remark"}
                                   label={'简介'}
                                   labelCol={{span: 3}}
                                   style={{marginBottom: 15}}>
                            <Input.TextArea rows={5} placeholder={'请输入'}/>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
        </div>
    );
};

export default connect()(Page);